import React from 'react';

import gradient from '@/assets/images/profile/GradientBack.png';
import gradientMobile from '@/assets/images/profile/GradientBackMobile.png';
import { setPremium } from '@/entities/profile/model/actions';
import { getUserProfile } from '@/entities/profile/model/selectors';
import { Cards } from '@/entities/profile/ui/Cards';
import { Info } from '@/entities/profile/ui/Info';
import { Purchases } from '@/entities/profile/ui/Purchases';
import { BackButton } from '@/features/BackButton';
import { useAppDispatch, useAppSelector } from '@/shared/store';
import { Title } from '@/shared/ui';
import { Checkbox } from '@/shared/ui/Checkbox';
import Image from 'next/image';
import { useWindowSize } from 'usehooks-ts';

import cs from './Subscription.module.scss';

export const Subscription = () => {
  const { width } = useWindowSize();

  const user = useAppSelector(getUserProfile);
  const d = useAppDispatch();

  return (
    <div className={cs.general_container}>
      <div className={cs.card_image}>
        <Image
          alt="preview"
          fill
          placeholder="blur"
          priority
          quality={100}
          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 100vw, (max-width: 1366px) 35vw, 45vw"
          src={width > 1024 ? gradient : gradientMobile}
        />
      </div>
      <div className={cs.container}>
        <span
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '12px',
            position: 'absolute',
            top: '12px',
            right: '12px',
          }}
        >
          <Checkbox isActive={user?.isPremium as boolean} setActive={() => d(setPremium())} /> Премиум
        </span>
        <BackButton className={cs.back} />
        <Title title="Подписка" />
        <Info />
        {/* <Cards /> */}
        <Purchases />
      </div>
    </div>
  );
};
